<template>
  <div class="app-container">
  <div class="filter-container">
        <el-button type="primary" @click="addClick()">新增预约</el-button>
        <el-button type="primary" @click="refreshClick()" style="margin-left:10px;">刷新</el-button>
        <el-input clearable v-model="search.number" placeholder="车牌号码" style="width: 170px;margin-left:10px;"></el-input>
        <el-input clearable v-model="search.name" placeholder="联系人" style="width: 170px;margin-left:10px;"></el-input>
        <el-input clearable v-model="search.phone" placeholder="联系电话" style="width: 170px;margin:0 5px;"></el-input>
        <el-date-picker v-model="search.daterange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>

        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
     <el-table-column  min-width="100" align="center" label="车牌号码">
        <template slot-scope="scope">
          <span>{{ scope.row.licenseplate }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="具体车型">
        <template slot-scope="scope">
          <span>{{ scope.row.carname }}</span>
        </template>
      </el-table-column>
      
      <el-table-column  min-width="100" align="center" label="车身颜色">
        <template slot-scope="scope">
          <span>{{ scope.row.carcolor }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="客户姓名">
        <template slot-scope="scope">
          <span>{{ scope.row.customername }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="联系电话">
        <template slot-scope="scope">
          <span>{{ scope.row.customerphone }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="预约日期">
        <template slot-scope="scope">
          <span>{{ scope.row.appointdate }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="预约进厂时间">
        <template slot-scope="scope">
          <span>{{ scope.row.appointfitdate }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="维修类别">
        <template slot-scope="scope">
          <span>{{ scope.row.repairtype }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="维修类型">
        <template slot-scope="scope">
          <span>{{ scope.row.repairtype2 }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="制单人">
        <template slot-scope="scope">
          <span>{{ scope.row.appointguider }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.state | parseAppointState }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="备注">
        <template slot-scope="scope">
          <span>{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="日期">
        <template slot-scope="scope">
          <span>{{ scope.row.createtime | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="操作"  width="400" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="rowFollowClick(scope.row.id)">跟进</el-button>
          <el-button type="primary" size="small" @click="rowEntrustClick(scope.row.id)">委托</el-button>
          <el-button type="primary" size="small" @click="rowWorkOrderClick(scope.row.id)">转工单</el-button>
          <el-button type="primary" size="small" @click="rowOperationClick(scope.row.id)">操作记录</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="fetchData" />



<!-- 新增 -->
<el-dialog :title="dialogAdd.title" :visible.sync="dialogAdd.visible"  width="900px">
    <div class="ci" v-show="dialogAdd.step==1">
        <div class="item">
            <span class="name required">检索：</span>
            <span class="value">
                <el-input v-model="dialogAdd.search.key" placeholder="车牌号码/联系人/电话" style="width:100%;"></el-input>
                <el-button type="primary" @click="dgAddSearchClick()" :loading="dialogAdd.listLoading" style="margin-left:10px;">查询</el-button>
            </span>
        </div>
        <div class="item hauto" v-show="dialogAdd.list!=null" style="flex-direction:column;">
            <div style="width:100%;">
            <el-table v-loading="dialogAdd.listLoading" :data="dialogAdd.list" 
                border fit highlight-current-row stripe
                style="width: 100%">
                <el-table-column align="center" label="序" width="80">
                    <template slot-scope="scope">
                    <span>{{ scope.row._id }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="车牌号码">
                    <template slot-scope="scope">
                    <span>{{ scope.row.licenseplate }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="具体车型">
                    <template slot-scope="scope">
                    <span>{{ scope.row.carname }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="车身颜色">
                    <template slot-scope="scope">
                    <span>{{ scope.row.carcolor }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="本店购买">
                    <template slot-scope="scope">
                    <span>{{ scope.row.buyinshop }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="联系人">
                    <template slot-scope="scope">
                    <span>{{ scope.row.customername }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="电话">
                    <template slot-scope="scope">
                    <span>{{ scope.row.customerphone }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="状态">
                    <template slot-scope="scope">
                    <span>{{ scope.row.state }}</span>
                    </template>
                </el-table-column>
                <el-table-column  min-width="100" align="center" label="时间">
                    <template slot-scope="scope">
                    <span>{{ scope.row.createtime |parseTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label=""  width="100" fixed="right">
                    <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="dgAddRowSelectClick(scope.row.id)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
            </div>
            <div class="nodata" v-if="dialogAdd.list!=null && dialogAdd.list.length==0">
                <el-button type="danger" @click="dgAddNewDataClick()">录入新信息</el-button>
            </div>
        </div>
    </div>
    <div class="ci" v-show="dialogAdd.step==2">
        <div class="item">
            <span class="name required">车牌号码：</span>
            <span class="value">
                <el-input v-model="dialogAdd.data.licenseplate" placeholder="车牌号码" style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">联系人：</span>
            <span class="value">
                <el-input v-model="dialogAdd.data.customername" placeholder="" style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">电话：</span>
            <span class="value">
                <el-input v-model="dialogAdd.data.customerphone" placeholder="" style="width:220px;"></el-input>
            </span>
        </div>
        <div class="item">
            <span class="name required">预计进厂时间：</span>
            <span class="value">
                <el-date-picker type="date" v-model="dialogAdd.data.fitdate"></el-date-picker>
            </span>
        </div>
        <div class="item">
            <span class="name required">维修类别：</span>
            <span class="value">
                <el-select v-model="dialogAdd.data.fixtype" clearable placeholder="--" style="width: 220px;">
                    <el-option 
                    v-for="(item,index) in selectOptions.fixtype"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </span>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAdd.visible = false">取 消</el-button>
        <el-button  v-show="dialogAdd.step==2" @click="dialogAdd.step = 1">返 回</el-button>
        <el-button type="primary" v-show="dialogAdd.step==2" @click="dgAddSaveClick()" :loading="dialogAdd.saveloading">保 存</el-button>
    </div>
</el-dialog>
<!-- end 新增 -->

<!-- 跟进 -->
<el-dialog :title="dialogFollow.title" :visible.sync="dialogFollow.visible"  width="700px">
    <div class="ci">
        <div class="item">
            <span class="name required">预计进厂时间：</span>
            <span class="value">
                <el-date-picker type="date" v-model="dialogAdd.data.fitdate"></el-date-picker>
            </span>
        </div>
        <div class="item">
            <span class="name required">维修类别：</span>
            <span class="value">
                <el-select v-model="dialogAdd.data.fixtype" clearable placeholder="--" style="width: 220px;">
                    <el-option 
                    v-for="(item,index) in selectOptions.fixtype"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </span>
        </div>
        <div class="item">
            <span class="name required">内容：</span>
            <span class="value">
                <el-input v-model="dialogAdd.data.content" placeholder="" style="width:220px;"></el-input>
            </span>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="dialogFollow.visible = false">关 闭</el-button>
        <el-button  type="primary" @click="dialogFollow.visible = false">保 存</el-button>
        
    </div>
</el-dialog>
<!-- end 跟进 -->

<!-- 委托 -->
<el-dialog :title="dialogEntrust.title" :visible.sync="dialogEntrust.visible"  width="700px">
    <div class="ci">
        <div class="item">
            <span class="name required">说明：</span>
            <span class="value">
                将此预约单转至一下同事名下进行跟进处理
            </span>
        </div>
        <div class="item">
            <span class="name required">新接单员：</span>
            <span class="value">
                <el-select v-model="dialogEntrust.data.fixtype" clearable placeholder="--" style="width: 220px;">
                    <el-option 
                    v-for="(item,index) in selectOptions.fixtype"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </span>
        </div>
        <div class="item">
            <span class="name required">内容：</span>
            <span class="value">
                <el-input v-model="dialogEntrust.data.content" placeholder="" style="width:220px;"></el-input>
            </span>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="dialogEntrust.visible = false">关 闭</el-button>
        <el-button  type="primary" @click="dialogEntrust.visible = false">保 存</el-button>
        
    </div>
</el-dialog>
<!-- end 委托 -->

<!-- 转工单 -->
<el-dialog :title="dialogWorkOrder.title" :visible.sync="dialogWorkOrder.visible"  width="700px">
    <div class="ci">
        
        <div class="item">
            <span class="name required">内容：</span>
            <span class="value">
                该预约单为陌生预约单，确定进入信息录入模块
            </span>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button  @click="dialogWorkOrder.visible = false">关 闭</el-button>
        <el-button  type="primary" @click="dgWrokOrderConfirmClick()">确 定</el-button>
        
    </div>
</el-dialog>
<!-- end 转工单 -->

<!-- 操作记录 -->
<el-dialog :title="dialogHistory.title" :visible.sync="dialogHistory.visible"  width="900px">
    <div class="ci">
        <el-table v-loading="dialogHistory.listLoading" :data="dialogHistory.list" 
          border fit highlight-current-row stripe 
          style="width: 100%">
          <el-table-column align="center" label="序" width="80">
            <template slot-scope="scope">
              <span>{{ scope.row._id }}</span>
            </template>
          </el-table-column>
        <el-table-column  min-width="100" align="center" label="跟进人员">
            <template slot-scope="scope">
              <span>{{ scope.row.operator }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="内容">
            <template slot-scope="scope">
              <span>{{ scope.row.content }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="结果">
            <template slot-scope="scope">
              <span>{{ scope.row.result }}</span>
            </template>
          </el-table-column>
          <el-table-column  min-width="100" align="center" label="时间">
            <template slot-scope="scope">
              <span>{{ scope.row.createtime |parseTime }}</span>
            </template>
          </el-table-column>
        </el-table>
        
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="dialogHistory.visible = false">关 闭</el-button>
        
    </div>
</el-dialog>
<!-- end 操作记录 -->

  </div>
</template>

<script>
import * as keepfitappointApi from '@/api/aftersale/keepfitappoint'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import * as enumHelper from '@/utils/enum'

export default {
    components: { Pagination },
    data(){
        return{
          search:{ 
              number:'',
              customer:'',
              phone:'',
              daterange:'',
          },
          listQuery: {
                page: 1,
                rows: 20,
                name:'',
                phone:'',
                state:-1,
                daterange:''
          },
          list:null,
          listLoading:false,
          total:0,
          selectOptions:{
            fixtype:[]
          },

          dialogAdd:{
              visible:false,
              saveloading:false,
              title:'新增预约',
              step:1,
              search:{
                  key:''
              },
              data:{
                  id:'',
                  customername:'',
                  customerphone:'',
                  fitdate:'',
                  fixtype:'',
                  licenseplate:'',

              },
              list:null,
              listLoading:false,
          },
          dialogFollow:{
              visible:false,
              saveloading:false,
              title:'跟进',
              data:{
                  id:'',
                  fitdate:'',
                  fixtype:'',
                  content:'',
              }
          },
          dialogEntrust:{
              visible:false,
              saveloading:false,
              title:'委托',
              data:{
                  id:'',
                  fitdate:'',
                  fixtype:'',
                  content:'',
              }
          },
          dialogWorkOrder:{
              visible:false,
              saveloading:false,
              title:'转工单',
              data:{
                state:false
              }
          },
          dialogHistory:{
              visible:false,
              saveloading:false,
              title:'操作记录',
              list:null,
              listLoading:false,
          }
        }
    },
    created(){
        var that=this;
        //初始化下拉菜单
        enumHelper.initOptions(that.selectOptions.fixtype,enumHelper.aftersale.fixType);
        that.fetchData();
    },
    filters:{
      parseAppointState(val){
        return enumHelper.aftersale.appointState.getName(val);
      }

    },
    methods:{
        fetchData(){
          var that=this;
            keepfitappointApi.getAppointDoingList({}).then(res=>{
              if(res.data){
                that.list=[...res.data.items.map((item,index)=>{
                  item._id=index+1;
                  return item;
                })];
              }
            })
        },
        refreshClick(){
          this.fetchData();
        },
        addClick(){
            this.dialogAdd.visible=true;
            this.dialogAdd.list=null;
            this.dialogAdd.step=1;
        },
        dgAddSearchClick(){
            var that=this;
            that.dialogAdd.listLoading=true;
            var c=parseInt(Math.random()*4);
            keepfitappointApi.getCarList({limit:c,page:1}).then(res=>{
                if(res.data){
                    that.dialogAdd.list=res.data.items.map((item,index)=>{
                        item._id=index+1;
                        return item;
                    })
                }
                that.dialogAdd.listLoading=false;
            })
        },
        dgAddSaveClick(){
          this.dialogAdd.visible=false;  
        },
        dgAddNewDataClick(){
            var that=this;
            that.dialogAdd.data.customername='';
            that.dialogAdd.data.customerphone='';
            that.dialogAdd.data.licenseplate='';
            that.dialogAdd.step=2;
        },
        dgAddRowSelectClick(id){
            var that=this;
            var selectItem=that.dialogAdd.list.filter(o=>o.id==id)[0];
            that.dialogAdd.step=2;
            that.dialogAdd.data.licenseplate=selectItem.carnumer;
        },
        rowFollowClick(id){
            var that=this;
            var selectItem=that.list.filter(o=>o.id==id)[0];
            that.dialogFollow.visible=true;
        },
        rowEntrustClick(id){
            var that=this;
            var selectItem=that.list.filter(o=>o.id==id)[0];
            that.dialogEntrust.visible=true;
        },
        rowWorkOrderClick(id){
            var that=this;
            var selectItem=that.list.filter(o=>o.id==id)[0];
            that.dialogWorkOrder.visible=true;
        },
        rowOperationClick(id){
            var that=this;
            that.dialogHistory.visible=true;
        },
        dgWrokOrderConfirmClick(){
          this.$router.push({
            path:'/aftersalemanage/allocate/addcar'
          })
        }
        
    }
}
</script>

<style scoped>
    .nodata {
        padding: 10px 0;
    }
</style>